<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>The HTML5 Herald</title>
  <meta name="description" content="HTML5 Template">
  <meta name="author" content="xxx">
</head>

<body>
  <input type="text" id="msg" />

  <span id="send">sendMessage</span>

  <input type="text" id="id" />
  <span id="chat">sendchatMessage</span>
</body>
<script src="../node_modules/socket.io-client/dist/socket.io.js"></script>
<script>
  var send = document.querySelector('#send');

  var chat = document.querySelector('#chat');

  var msg = document.getElementById("msg");
  var id = document.getElementById("id");

  var socket = io('ws://localhost:3000/chat');
    // 自定义事件
    socket.on('broadcast', data => {
        console.log('服务端消息：',data);
    })
  socket.on('chat', data => {
    console.log('私人消息：',data);
  })

  chat.onclick = () => {
      console.log('私人消息')
    socket.emit('chat',id.value,msg.value);
  }

  send.onclick = () => {
      socket.emit('broadcast',msg.value);
  }
</script>
</html>
